<template>
   <div class="playBox ">
      <!-- 划分  ==》 细分模块封装
                  1. 划分模块
                  2. 在页面布局
            -->
      <!-- 头部 -->
      <div class="topNav ">
         <div class="topNav-one w-flex3">
            <div class="topNav-one-left w-flex3">
               <span>直播状态</span>
               <Select placeholder="请选择课程状态" @getSelectD="getSelectD" :playcList="playcList"></Select>
            </div>
            <div class="topNav-one-right w-flex3">
               <span>直播名称</span> <Inputw @getInputV="getInputV"></Inputw>
            </div>
            <div class="topNav-three"></div> 
            <!-- 占位，为了让上面的元素排布更好看 -->

         </div>
         <div class="topNav-two w-flex3">
            <div class="topNav-two-left w-flex3">
               <span>开始日期</span> 
               <SelectTime @getTimeV="getTimeV"></SelectTime>
            </div>
            <div class="topNav-two-right tops">
               <TopSelect></TopSelect>
            </div>
            <div class="topNav-two-right w-flex3">
               <el-button type="primary">查询</el-button> <el-button>重置</el-button>
            </div>
         </div>
      </div>

      <!-- 中间列表区域 -->
      <div class="content">
         <!-- 划分 -->
         <div class="content-top w-flex3">
            <div class="content-top-left">直播列表</div>
            <div class="content-top-right aa1">
               <el-button type="primary" :icon="Plus">新建</el-button>
               <el-button class="pl">批量操作</el-button>
            </div>
         </div>

         <!-- 直播列表   父组件 向 子组件传数据 -->
         <TableW :playLists="playLists"></TableW>

         <!-- 底部分页区域 -->
         <Paginationw></Paginationw>

      </div>
      <div class="foot"></div>
   </div>
</template>

<script setup lang="ts">
import Select from '@/ElementC/Select/index.vue';
import SelectTime from '@/ElementC/SelectTime/index.vue'
import Inputw from '@/ElementC/Inputw/index.vue'
import TopSelect from '@/ElementC/TopSelect/index.vue'
import TableW from '@/ElementC/TableW/index.vue'
import Paginationw from '@/ElementC/Paginationw/index.vue'
import { getCoursePlay, PlayListData } from '@/http/api/play'
import { Plus } from '@element-plus/icons-vue'
import { ref,reactive } from 'vue'

// 数据基本都是在父组件获取， 然后通过父组件传给 子组件
// getCoursePlay().then(()=>{})  //这个方法会返回一个promise，但不要直接这样用

// 课程状态选择
let playcList = ref([])
const getPlayC = () => {
   getCoursePlay({}).then((res: any) => {
      // console.log(res, 1122);
      playcList.value = res.list
   })
}
getPlayC()

// list列表数据
//  写一个方法拿数据  =》 在页面一打开时需要获取到一个默认数据
let playLists = ref([])
const getPlayListD = (Playstate = '全部', time = '今天', name = '') => {
   // set - 
   PlayListData({ Playstate: Playstate, time: time, name: name }).then((res: any) => {
      // console.log(res,233333); 
      playLists.value = res.data.list;   //获取到列表数据
   })
}
getPlayListD()

// 接收头部选择的数据
let listParams = reactive({
   Playstate:'全部',
   time:'今天',
   name:''
})
const getSelectD = (val:any)=>{  //得到 头部的状态
   // console.log(val,1111113); 
   listParams.Playstate = val  
}

const getInputV = (val:any)=>{
   // console.log(val,3333);   
   listParams.name = val;
}

const getTimeV = (val:any)=>{
   // console.log(val);
   listParams.time = val;    
}

</script>
<style scoped lang="scss">
.playBox {
   display: flex;
   flex-direction: column;
   max-width: 85%;
   margin: 0 auto;
   height: 100%;

   // background-color: red;
   // padding-top: 10px;
   .topNav {
      background-color: #fff;
      // background-color: pink;
      padding: 18px 30px;
      border-radius: 10px;

      .topNav-three {
         width: 7%;
      }

      .topNav-two {
         margin-top: 18px;
      }
   }

   .content {
      background-color: #fff;
      padding: 18px 30px;
      border-radius: 10px;
      margin-top: 18px;

      .content-top {
         margin-bottom: 20px;
         // background-color: pink;
      }

      .aa1 {

         // margin-right: 10px;
         .pl {
            background-color: #fff;
            color: #333;
         }
      }
   }
   .foot{
      height: 5%;
   }
}</style>